<template>
  <div>
    <el-page-header
      @back="handleBack"
      content="添加财务信息"
    ></el-page-header>
    <el-row>
      <el-col :span="8">
        <el-form
          :model="addForm"
          label-width="auto"
          ref="addForm"
          :rules="rules"
        >
          <el-form-item prop="amountMoney" label="状态">
            <el-select
              placeholder="请选择"
              clearable
              v-model.trim="addForm.amountMoney"
            >
              <el-option
                v-for="item in amountMoneyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="money" label="薪资">
            <el-input
              placeholder="请输入"
              clearable
              v-model.number="addForm.money"
            ></el-input>
          </el-form-item>
          <el-form-item prop="department" label="部门">
            <el-select
              placeholder="请选择"
              clearable
              v-model.trim="addForm.department"
            >
              <el-option
                v-for="item in stateList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button :loading="subLoading" @click="handleAdd" type="primary"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      amountMoneyList:[
        {
          value: "收入",
          label: "收入",
        },
        {
          value: "支出",
          label: "支出",
          }
      ],
      stateList: [
        {
          value: "设备部门",
          label: "设备部门",
        },
        {
          value: "接待部门",
          label: "接待部门",
        },
        {
          value: "总经理",
          label: "总经理",
        },
        {
          value: "人事部门",
          label: "人事部门",
        },
        {
          value: "财务部门",
          label: "财务部门",
        },
         {
          value: "副经理",
          label: "副经理",
        },
      ],
      addForm: {
      },
      subLoading: false,
      rules: {
        money: [
          {
            required: true,
            message: "状态不可以为空",
          },
        ],
        amountMoney: [
          {
            required: true,
            message: "薪资不可以为空",
          },
        ],
        department: [
          {
            required: true,
            message: "所在部门不可以为空",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState("pmModel", ["PMList"]),
  },
  methods: {
    ...mapActions("pmModel", ["getUsersList"]),
    handleBack() {
      this.$router.history.go(-1);
    },
    async handleAdd() {
      console.log(11);
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          const { data: result } = await this.$http.post("addFinance",this.addForm);
          if (result.errorCode < 0) {
            alert("添加失败");
          } else {
            this.subLoading = true;
            alert("添加成功");
            this.subLoading = false;
            this.handleBack();
          }
        } else {
          alert("添加失败");
          return false;
        }
      });
    },
  }
}
</script>

<style>
.el-page-header {
  margin: 5%;
}
.el-select {
  width: 345px;
}
</style>
